<template>
  <div class="personal">
    <!-- 头部导航栏 -->
    <div class="heaer">
      <div v-if="isShow" class="left">
        <img src='../../../../static/images/defaultface_user_after.png' />
        <div>登录/注册</div>
      </div>
      <div class="right">
        <img src='../../../../static/images/icon_setting.png' />
        <img src='../../../../static/images/icon_message.png' />
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="userInfo">
      <div class="left">
        <img src='../../../../static/images/defaultface_user_after.png' />
      </div>
      <div class="right">
        <div class="top">登录/注册</div>
        <div class="bottom">
          <span class="icon-sign"></span>
          <span class="text">签到领积分</span>
          </div>
      </div>
    </div>
    <div class="content">
      <div class="property commonClass">
        <div class="item">
          <div class="num">-</div>
          <div class="title">积分</div>
        </div>
        <div class="specLine"></div>
        <div class="item">
          <div class="num">-</div>
          <div class="title">优惠券</div>
        </div>
        <div class="specLine"></div>
        <div class="item">
          <div class="num">-</div>
          <div class="title">代金券</div>
        </div>
      </div>
      <!-- 我的订单 -->
      <div class="order commonClass">
        <CardTitle :title='"我的订单"' :moreText='"全部订单"' />
        <div class="orderTypes">
          <div class="item">
            <div class="icon" style="background-position: 0 0px;"></div>
            <div class="title">待付款</div>
          </div>
          <div class="item">
            <div class="icon" style="background-position: 0 -42px;"></div>
            <div class="title">待收货</div>
          </div>
          <div class="item">
            <div class="icon" style="background-position: 0 -84px;"></div>
            <div class="title">待评价</div>
          </div>
          <div class="item">
            <div class="icon" style="background-position: 0 -126px;"></div>
            <div class="title">退换/退款</div>
          </div>
          <div class="item">
            <div class="icon" style="background-position: 0 -168px;"></div>
            <div class="title">回收单</div>
          </div>
        </div>
        <!-- 轮播图 -->
        <swiper class="swiper1" :options="swiperOption">
      　　<swiper-slide v-for="item in swiperList" :key="item.id">
            <img :src="item.imgUrl" />
          </swiper-slide>
        </swiper>
      </div>
      <!-- 会员专享 -->
      <div class="vipArea commonClass">
        <CardTitle :title='"会员专享"' :moreText='"更多会员权益"' />
        <div class="couponList">
          <div class="item" v-for="item in couponList" :key="item.batchId">
            <div class="left">
              <div class="promoVal"><span>¥</span>{{item.promoVal}}</div>
              <div class="promoName">{{item.promoName}}</div>
            </div>
            <div class="right">
              <div class="promoType">领取</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 我的VMALL -->
      <div class="vMall commonClass">
        <CardTitle :title='"我的VMALL"' :moreText='""' />
        <div class="vmallList">
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/3NgsqeFkJSdbC5EaZt8k.png" />
            <div>会员频道</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/nS9fmic5GuwdgqR62oAt.png" />
            <div>邀请有礼</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/cUQ1Yei12vB0MNw0iJ7a.png" />
            <div>优享购</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/0FHCWcjJLxXDvHYzrHcE.png" />
            <div>优购码</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/aXHSj2n7eZ3Zwr4sdXTm.png" />
            <div>我的拼团</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/9wVcOCYjKQ5oKQ5ujcFN.png" />
            <div>收货地址</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/pKum8NDxC8g3guJhIaEN.png" />
            <div>预约记录</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/zuLd2CorbQ6Vo2zeyBOV.png" />
            <div>企业购</div>
          </div>
        </div>
      </div>
      <!-- 我的服务 -->
      <div class="vMall commonClass">
        <CardTitle :title='"我的服务"' :moreText='"联系客服"' />
        <div class="vmallList">
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/3CqWFKmzSVTG5WYvrNx8.png" />
            <div>自助服务</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/gvy89qnAExuDJDjdaWgP.png" />
            <div>特色服务</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/rPbRWRHAWMAVCovRBehZ.png" />
            <div>零售店</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/MOV599G1zaOvU7sM3tMd.png" />
            <div>实名认证</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/BcFUNcxBeM9fewTc16QC.png" />
            <div>以旧换新</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/v7aUv4jiCp2BhZmmVXWn.png" />
            <div>补够保障</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/bGbPRdKxBeiVPe50g3EG.png" />
            <div>一口价换电池</div>
          </div>
          <div class="item">
            <img src="https://res.vmallres.com/pimages/pages/mygrid/5j2OERFj8ut1nB6WBZcy.png" />
            <div>常见问题</div>
          </div>
        </div>
      </div>
      <!-- 华为生活 -->
      <div class="live commonClass">
        <CardTitle :title='"华为生活"' :moreText='""' />
        <div class="liveList">
          <img src="https://res.vmallres.com/pimages//sale/2019-01/vbWjbV8qDpMZAEfVG6Rr.png" />
          <img src="https://res.vmallres.com/pimages//sale/2019-01/SsPo08I0eVbYcxkbU6tP.png" />
          <img src="https://res.vmallres.com/pimages//sale/2019-01/P4QEfc9ja3ryXeUhWskN.png" />
        </div>
      </div>
      <!-- 为您推荐 -->
      <div class="recommend">
        <div class="title">为您推荐</div>
        <div class="recommendList">
          <img src="https://res.vmallres.com/pimages/pages/dynamicMsg/qYCsgaoMLXGNRdowALAL.png" />
          <div class="line"></div>
          <img src="https://res.vmallres.com/pimages/pages/dynamicMsg/xkOfUDLjZLFMiRyhB2kb.png" />
          <div class="line"></div>
          <img src="https://res.vmallres.com/pimages/pages/dynamicMsg/xJ1w7Tb8xNlDWQy8SCeW.jpg" />
        </div>
      </div>
    </div>
    <!-- 登录 反馈 -->
    <BottomArea />
    <Tarbar :activeIndex=4></Tarbar>
  </div>
</template>

<script>
import Tarbar from '../../common/tarbar'
import BottomArea from '../../common/bottom'
import CardTitle from './cardTitle'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css';
export default {
  name: 'personal',
  components: {
    Tarbar,
    CardTitle,
    swiper,
    swiperSlide,
    BottomArea
  },
  data () {
    return {
      swiperOption: {
        direction : 'horizontal',
    　　autoplay: {
    　　　　delay: 3000,
    　　　　disableOnInteraction: false 
    　　},
    　　loop: true,
      },
      swiperList: [
        {
          id: 1,
          imgUrl: 'https://res.vmallres.com/pimages//pages/picImages/liC74TiV8OjdfcNXBUmx.jpg'
        },
        {
          id: 2,
          imgUrl: 'https://res.vmallres.com/pimages//pages/picImages/aqKFjFMDHYBPemSCCvNR.jpg'
        },
      ],
      couponList: [],
      isShow: false
    }
  },
  methods :{
    // 获取首页数据
    async queryPersonalCenterCoupon(){
      let data = await this.$http.get('../../../../static/mock/queryPersonalCenterCoupon.json');
      this.couponList = data.couponInfos;
    },
    handleScroll(){      
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   
      this.isShow = scrollTop >= 80 ? true : false
    }
  },
  mounted() {
    this.queryPersonalCenterCoupon();
    window.addEventListener('scroll',this.handleScroll)
  }
}
</script>

<style scoped lang="scss">
.personal{
  background-color: #f9f9f9;
  margin-bottom: 100px;
  .heaer{
    color: white;
    font-size: 36px;
    height: 82px;
    line-height: 82px;
    background-color: #e41f2b;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
    .left{
      position: absolute;
      left: 30px;
      top: 0;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      img{
        width: 50px;
        height: 50px;
        margin-top: 16px;
        margin-right: 14px;
      }
      .div{
        line-height: 82px;
        color: white;
      }
    }
    .right{
      position: absolute;
      right: 30px;
      top: 0;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      img{
        width: 50px;
        height: 50px;
        margin-top: 16px;
        margin-left: 14px;
      }
    }
  }
  .userInfo{
    margin-top: 82px;
    padding: 10px 30px;
    height: 260px;
    background-color: #e41f2b;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom-left-radius: 60% 15%;
    border-bottom-right-radius: 60% 15%;
    .left{
      img{
        width: 120px;
        height: 120px;
      }
    }
    .right{
      margin-left: 20px;
      color: white;
      .top{
        font-size: 40px;
        padding: 10px 0;
      }
      .bottom{
        padding: 3px 10px;
        line-height: 34px;
        background-color: rgba(0, 0, 0, 0.1);
        font-size: 24px;
        border-radius: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        span{
          display: block;
        }
        .icon-sign{
          width: 28px;
          height: 28px;
          margin-right: 6px;
          display: inline-block;
          background: url(../../../../static/images/icon-sign.png) no-repeat bottom center;
          background-size: 100%;
        }
      }
    }
  }
  .content{
    padding: 0 20px;
    margin-top: -66px;
    z-index: 1;
    .commonClass{
      border-radius: 16px;
      background-color: white;
      padding: 20px;
      margin-bottom: 20px;
    }
    .property{
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: nowrap;
      align-items: center;
      .item{
        color: #666;
        font-size: 24px;
        text-align: center;
        width: 220px;
        height: 68px;
        .num{
          height: 32px;
          line-height: 32px;
        }
      }
      .specLine{
        height: 40px;
        width: 1px;
        background-color: #eaeaea;
      }
    }
    .order{
      .orderTypes{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        .item{
          width: 20%;
          text-align: center;
          .icon{
            width: 84px;
            height: 84px;
            background: url(../../../../static/images/icon_orders.png) no-repeat;
            background-size: 100% auto;
            display: inline-block;
          }
          .title{
            color: #666;
            font-size: 24px;
            height: 20px;
            line-height: 20px;
          }
        }
      }
      .swiper1{
        width: 670px;
        height: 186px;
        margin-top: 20px;
        .swiper-wrapper{
          width: 100%;
          height: 100%;
          .swiper-slide{
            img{
              height: 186px;
              width: 670px;
              border-radius: 10px;
            }
          }
        }
        .swiper-pagination{
          text-align: right;
        }
      }
    }
    .vipArea{
      .couponList{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar{
          display: none;
        }
        .item{
          flex-shrink: 0;
          width: 320px;
          height: 186px;
          background-image: url(../../../../static/images/vip.png);
          background-position: -10px center;
          background-repeat: no-repeat;
          background-size: 330px 196px;
          position: relative;
          .left{
            width: 190px;
            text-align: left;
            margin-left: 20px;
            .promoVal{
              color: #ca141d;
              font-size: 50px;
              font-weight: bold;
              letter-spacing: 2px;
              padding-top: 26px;
              span{
                font-size: 32px;
              }
            }
            .promoName{
              font-size: 24px;
              color: #666666;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .right{
            position: absolute;
            right: 12px;
            top: 0;
            height: 186px;
            width: 70px;
            .promoType{
              color: white;
              font-size: 24px;
              height: 186px;
              line-height: 186px;
              text-align: center;
            }
          }
        }
      }
    }
    .vMall{
      .vmallList{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        .item{
          height: 150px;
          width: 25%;
          text-align: center;
          img{
            width: 82px;
            height: 82px;
          }
          div{
            width: 80%;
            margin-left: 10%;
            color: #666;
            font-size: 24px;
          }
        }
      }
    }
    .live{
      .liveList{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar{
          display: none;
        }
        img{
          flex-shrink: 0;
          width: 304px;
          height: 186px;
          margin-right: 16px;
        }
      }
    }
    .recommend{
      margin-bottom: 20px;
      .title{
        height: 104px;
        line-height: 104px;
        color: #333;
        font-size: 34px;
        font-weight: bold;
      }
      .recommendList{
        padding: 16px 20px;
        border-radius: 16px;
        background-color: white;
        img{
          width: 670px;
          height: 186px;
          border-radius: 16px;
        }
        .line{
          height: 1px;
          background-color: #eaeaea;
          margin: 20px 0;
        }
      }
    }
  }
}
</style>


